<template>
  <div class="onlineFilingLegalEntity">
    <div class="topBg">
      <van-nav-bar @click-left="onClickLeft" title="企业建档" left-arrow />
    </div>
    <div class="content">
      <div class="uploadBox">
        <van-form>
          <van-field
            v-model="uploadForm.certificateType"
            name="picker"
            label="企业证件类型"
            placeholder="请选择企业证件类型"
            clickable
            is-link
            @click="uploadForm.certificateFlag = true"
          />
          <van-popup v-model="uploadForm.certificateFlag" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns1"
              @confirm="onConfirm"
              @cancel="uploadForm.certificateFlag = false"
            />
          </van-popup>
          <van-field label-width="7rem" name="uploader" label="上传组织证件照"></van-field>
          <van-uploader :max-count="1" v-model="uploadForm.uploader" :after-read="afterRead">
            <span class="uploadBg">
              <img src="@/assets/upload.png" alt="">
            </span>
          </van-uploader>
          <div class="tip">
            请上传营业执照/社会团体法人证书/事业单位法人证书/组织机构代码证等机构最新有效的证件照片，除营业执照外，其余证件证件均需要进行人工审核。若营业执照自动审核失败，可继续提交，走人工审核流程进行复核。
          </div>
        </van-form>
      </div>
      <div class="formQuery">
        <van-form>
          <van-field v-model="enterpriseForm.name" name="企业名称" label="企业名称" placeholder="请输入"/>
          <van-field v-model="enterpriseForm.username" class="organizationCode" label-width="7rem" name="统一社会信用代码/组织机构代码" readonly label="统一社会信用代码/组织机构代码" placeholder="请输入"/>
          <van-field v-model="enterpriseForm.code" name="法定代表人" label="法定代表人" placeholder="请输入"/>
          <van-field v-model="enterpriseForm.phone" name="法人身份证" label="法人身份证" placeholder="请输入"/>
          <van-field
            v-model="enterpriseForm.photograph"
            clickable
            is-link
            readonly
            name="picker"
            label="所属行业"
            placeholder="请选择"
            @click="enterpriseForm.photographFlag = true"
          />
          <van-popup v-model="enterpriseForm.photographFlag" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns2"
              @confirm="onConfirmpPotographFlag"
              @cancel="enterpriseForm.photographFlag = false"
            />
          </van-popup>
          <van-field v-model="enterpriseForm.address" name="单位地址" label="单位地址" placeholder="请输入" />
          <van-field v-model="enterpriseForm.detailAddress" name="详细地址" label="详细地址" placeholder="请输入具体门牌号"/>
        </van-form>
      </div>
      <div class="formTip">
        <van-checkbox v-model="checked">我已阅读并同意移动云使用并传送相关数据用于身份核验<span>《服务通用规则》</span></van-checkbox>
      </div>
      <div class="btns">
        <van-button round block type="default" @click="handleCancel">取消</van-button>
        <van-button round block type="info" @click="handleSubmit">提交</van-button>
      </div>
    </div>
  </div>
</template>
<script>
import zjz1 from '@/assets/zjz1.png'
import { areaList } from '@vant/area-data';
export default {
  name: 'LegalEntity',
  data() {
    return {
      areaList,
      checked: false,
      uploadForm: {
        certificateFlag: false,
        uploader: [],
      },
      enterpriseForm: {
        photographFlag: false,
        addressFlag: false
      },
      columns1: ["营业执照"],
      columns2: ["软件/通信行业"],
    }
  },
  methods: {
    handleSubmit() {
      this.$toast.success('建档资料已提交');
      this.$router.push('/immediateProcessing');
    },
    handleCancel() {
      this.$router.go(-1)
    },
    onFinish() {},
    afterRead() {
      this.uploadForm.uploader = [{url: zjz1}]
      console.log(this.uploadForm)
      this.enterpriseForm.name = "四通八达通讯公司"
      this.enterpriseForm.username = "91330100799655058B"
      this.enterpriseForm.code = "一路发"
      this.enterpriseForm.phone = "1029348485744"
      this.enterpriseForm.photograph = "软件/通信行业"
      this.enterpriseForm.address = "北京/市辖区/朝阳区"
      this.enterpriseForm.detailAddress = "复星国际中心"
    },
    onConfirm(value) {
      console.log(value)
      this.uploadForm.certificateType = value
      this.uploadForm.certificateFlag = false
    },
    onConfirmpPotographFlag(value) {
      this.enterpriseForm.photograph = value
      this.enterpriseForm.photographFlag = false
    },
    onConfirmpAddressFlag(values) {
      this.enterpriseForm.address = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/');
      this.enterpriseForm.addressFlag = false
    },
    onClickLeft() {
      this.$router.push('/category')
    }
  },
}
</script>

<style lang="less" scoped>
.onlineFilingXw {
  overflow: auto;
}
.content {
  width: 100%;
  position: absolute;
  top: .98rem;
  .uploadBox {
    width: 7.1rem;
    border-radius: 0.3rem;
    background: #FFFFFF;
    padding: .24rem 0;
    margin-left: .2rem;
    .van-uploader {
      width: 100%;
      /deep/.van-uploader__wrapper {
        justify-content: center;
        .van-image {
          width: 4.2rem;
          height: auto;
          .van-image__img {
            width: 4.2rem;
          }
        }
      }
      .uploadBg {
        margin-top: .1rem;
        img {
          width: 4.2rem;
        }
      }
    }
    .tip {
      padding: 0 .3rem;
      // width: 6.5rem;
      // height: 1.36rem;
      font-weight: normal;
      font-size: 0.22rem;
      color: #999999;
      line-height: 0.34rem;
      text-align: justify;
      font-style: normal;
    }
  }
  .formQuery {
    margin-top: .2rem;
    width: 7.1rem;
    padding: .24rem 0;
    background: #FFFFFF;
    border-radius: 0.3rem;
    margin-left: .2rem;
  }
  .formTip {
    width: 6.45rem;
    font-weight: normal;
    line-height: 0.4rem;
    text-align: left;
    font-style: normal;
    margin-left: .2rem;
    margin-top: .28rem;
    /deep/ .van-checkbox__label {
      font-size: 0.28rem;
      color: #666666;
    }
    span {
      color: #2892FF;
    }
  }
  .btns {
    background: #fff;
    margin-top: .2rem;
    width: 100%;
    height: 1.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 .2rem;
    button {
      width: 3.14rem;
      height: .72rem;
      border-radius: 0.2rem;
      font-size: 0.32rem;
      &:first-child {
        background: #E9F4FF;
        color: #2892FF;
        border: 0 !important;
      }
    }
  }
}
/deep/ .organizationCode {
  display: flex;
  flex-direction: column;
}

</style>